import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { TextField } from 'iftide';

export default class Basic extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showErrorInfo: false,
            errorInfo: ''
        }
    }

    _focus() {
        console.log('11');
        this.setState({
            showErrorInfo: true,
            errorInfo: "没有啊啊啊这个学校"
        })
    }

    _iconClick() {
        console.log('click icon');
    }


    render() {
        const img = require('../images/Icon.png');

        return (
            <View>
                <View style={styles.item}>
                    <TextField
                        titleIconFunc={() => { alert(1) }}
                        titleIcon={require('./sicon.png')}
                        selectionColor={'red'}
                        hasTopBorder={true}
                        isMerge={true} title="学校名称"
                        placeholder="请输入中英文学校名称"
                        showClearIcon={false}
                        onFocus={() => this._focus()}
                        showErrorInfo={this.state.showErrorInfo}
                        errorInfo={this.state.errorInfo} />
                </View>
                <View style={styles.item}>
                    <TextField isMerge={true} title="学校名称" placeholder="请输入中英文学校名称（清除）" showClearIcon={true} secureTextEntry={true} titleIcon={img} titleIconFunc={() => this._iconClick()} />
                </View>
                <View style={styles.item}>
                    <TextField isMerge={true} leftIcon={img} placeholder="请输入中英文学校名称" showClearIcon={false} />
                </View>
                <View style={styles.item}>
                    <TextField leftIcon={img}
                        placeholder="请输入中英文学校名称（清除）"
                        showClearIcon={true}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        flexDirection: 'row',
    }
});